<template>
  <div v-loading="loading" class="h-100 flex algin-center">
    <div v-if="isData" ref="chart" class="w-100 h-100" style="width: 100%; height: 100%" />
    <NullData v-else type="alarm" title="暂无告警" />
  </div>
</template>
<script>
  import * as echarts from 'echarts'
  import { defaultAlarmColor } from '@/utils/common'
  import commonMixin from './js/commonMixin'

  export default {
    mixins: [commonMixin],
    data() {
      return {
        isData: true,
        loading: false,
        dateValue: 'ALARMTYPE',
        dateTextList: [
          { value: 'ALARMTYPE', label: this.$t('ALARM_TYPE') },
          { value: 'confirm', label: this.$t('CONFIRMATION_STATE') }
        ],
        indicator: [
          { text: this.$t('AFS_ALARM') },
          { text: this.$t('SERVICE_QUALITY_ALARM') },
          { text: this.$t('PEM_ALARM') }
        ]
      }
    },
    computed: {},
    mounted() {
      this.$nextTick(() => {
        this.renderChart()
      })
    },
    methods: {
      renderChart() {
        this.isData = true
        this.statusChart && this.statusChart.clear()
        this.statusChart && this.statusChart.resize()
        const colors = Object.values(defaultAlarmColor)
        const colorData =
          this.getTheme === 'dark-theme'
            ? {
              level: colors,
              area: [
                'rgba(66, 142, 166, 1)',
                'rgba(33, 93, 137, 1)',
                'rgba(31, 70, 129, 1)',
                'rgba(17, 42, 91, 1)'
              ],
              border: 'rgba(8, 41, 91, 1)'
            }
            : {
              level: colors,
              area: [
                'rgba(244, 254, 255, 1)',
                'rgba(234, 250, 252, 1)',
                'rgba(209, 237, 244, 1)',
                'rgba(197, 230, 238, 1)'
              ],
              border: 'rgba(148, 202, 214, 1)'
            }
        const chartData = [
          {
            value: [0, 0, 0],
            name: this.$t('ALARM_LEVEL_1')
          },
          {
            value: [0, 0, 0],
            name: this.$t('ALARM_LEVEL_2')
          },
          {
            value: [0, 0, 0],
            name: this.$t('ALARM_LEVEL_3')
          },
          {
            value: [0, 0, 0],
            name: this.$t('ALARM_LEVEL_4')
          }
        ]
        const alarmStatus = this.statisticsData.alarmStatus
        const valueIndex = {
          AFS: 0,
          OEN: 1,
          PEM: 2
        }
        const values = [0]
        alarmStatus.forEach(i => {
          values.push(i.count)
          chartData[Number(i.alarmLevel) - 1].value[valueIndex[i.bizModule]] = i.count
        })
        let maxVal = parseInt(Math.max(...values) * 1.25)
        maxVal = maxVal < 4 ? 4 : maxVal
        const _this = this
        const option = {
          color: colorData.level,
          tooltip: {
            ..._this.tooltipOptions(),
            formatter: params => {
              const htmlArr = `${params.name}<br/>
              ${params.marker}${_this.indicator[0].text}：${params.value[0]}<br/>
              ${params.marker}${_this.indicator[1].text}：${params.value[1]}<br/>
              ${params.marker}${_this.indicator[2].text}：${params.value[2]}`
              return htmlArr
            }
          },
          legend: {
            icon: 'roundRect',
            itemHeight: 10,
            itemWidth: 20,
            itemGap: 15,
            orient: 'vertical',
            top: '10',
            left: '10',
            textStyle: {
              color: _this.homeAxisText(),
              fontSize: this.resetSize(12)
            }
          },
          radar: {
            indicator: [
              {
                name: `【${_this.$t('AFS_ALARM')}】`,
                color: _this.textColor(),
                min: 0,
                max: maxVal
              },
              {
                name: `【${_this.$t('SERVICE_QUALITY_ALARM')}】`,
                color: _this.textColor(),
                min: 0,
                max: maxVal
              },
              {
                name: `【${_this.$t('PEM_ALARM')}】`,
                color: _this.textColor(),
                min: 0,
                max: maxVal
              }
            ],
            center: ['60%', '52%'],
            radius: '70%',
            startAngle: 90,
            splitNumber: 4,
            shape: 'circle',
            nameGap: 65,
            axisName: {
              formatter: '{value}',
              color: _this.textColor(),
              fontSize: _this.resetSize(12),
              padding: [-60, -80]
            },
            splitArea: {
              areaStyle: {
                color: colorData.area,
                // shadowColor: 'rgba(0, 0, 0, 0.2)',
                shadowBlur: 0
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: colorData.border
              }
            },
            splitLine: {
              lineStyle: {
                color: colorData.border
              }
            }
          },
          series: [
            {
              type: 'radar',
              symbolSize: 4,
              symbol: 'circle',
              lineStyle: {
                width: 1
              },
              emphasis: {
                lineStyle: {
                  width: 2
                }
              },
              data: chartData
            }
          ]
        }
        this.$nextTick(() => {
          !this.statusChart && (this.statusChart = echarts.init(this.$refs.chart))
          this.statusChart.setOption(option)
        })
      }
    }
  }
</script>
<style lang="scss">
  .chart-alarm-type {
    right: left;
    width: 90px !important;
  }
</style>
./js/commonMixin
